<template>
  <div class="feedback" style="min-height: 500px">
    <div class="createProblem">
      <el-input type="textarea" :autosize="{minRows:3,maxRows:5}" v-model="question" v-if="isTextArea" class="textArea" maxlength="200"
                show-word-limit></el-input>
      <el-button class="main-btn" type="primary" style="float:right;" @click="createProblem" v-if="!isTextArea">创建问题</el-button>
      <el-button class="main-btn" type="primary" style="float:right;" @click="submitProblem" v-if="isTextArea">提交</el-button>
      <el-button class="border-btn" style="float:right;margin-right: 10px" @click="consoleProblem" v-if="isTextArea">取消</el-button>
      <div class="left" style="margin-top: 40px;display: flex">
        <el-radio-group v-model="selectType" size="medium" fill="rgba(62, 144, 158, 0.1)" text-color="#3E909E"
                        @change="selectData()">
          <el-radio-button label="1">我的问题</el-radio-button>
          <el-radio-button label="0">全部问题</el-radio-button>
        </el-radio-group>
        <div style="display: flex;height: 30px;margin-top: 4px;margin-left:30px">
          <el-input v-model="search" style="width: 200px;" placeholder="请输入搜索关键字"></el-input>
          <el-button class="main-btn" type="primary" style="margin-left: 10px" @click="searchData()">搜索</el-button>
          <el-button class="border-btn" style="margin-left: 10px;" @click="clearData()">重置</el-button>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list-item" v-for="(item,index) in list" :key="index" style="margin-bottom:10px;border-bottom:1px solid #e3e3e3">
        <div class="title"><div class="title-left">问:{{item.question}}</div><div class="title-right">{{item.CreatedAt | dateFormat}}</div></div>
        <div class="content">答：{{item.reply}}</div>
<!--        <div style="width: 30%;display: flex;margin-bottom: 10px"><el-input v-model="list[index].input"></el-input><el-button style="margin-left: 20px" @click="updateProblem(item.ID,index)">更新问题</el-button></div>-->
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {getQiniu} from "../../api/common";
  import { feedbackList,createFeedback,updateFeedback} from "@/api/user";
  export default {
    data() {
      return {
        isTextArea:false,
        currentPage:1,
        total:0,
        search:'',
        // domain: "http://upload.qiniu.com", // 七牛云的上传地址
        // qiniuToken: {}, //上传到七牛的token
        // activeName: 'first',
        // labelPosition: 'right',
        // dialogImageUrl: '',
        // dialogVisible: false,
        ruleForm: {
          textarea: '',
          phone: ''
        },
        rules:{

        },
        selectDatas:{
          pager:{
            number:1,
            size:5,
            order_by:'',
          },
          create_id:'',
          search_info:'',
        },
        list:[
          {
            input:''
          }
        ],
        question:'',
        update:'',
        selectType: '1',
      };
    },
    created() {
      //获取列表
      // console.log(this.$store.getters.userInfo)
      this.selectDatas.create_id = this.$store.getters.userInfo.id
      this.getList(this.selectDatas)
    },
    methods: {
      //筛选数据
      selectData() {
        console.log(this.selectType)
        if (this.selectType == '1') {
          this.selectDatas.pager.number = 1
          this.selectDatas.create_id = this.$store.getters.userInfo.id
          this.getList(this.selectDatas)
        }else {
          this.selectDatas.pager.number = 1
          this.selectDatas.create_id=0
          this.getList(this.selectDatas)
        }
        this.$forceUpdate()
      },
      //获取列表
      getList(data){
        // let data={
        //   pager:{
        //     number:1,
        //     size:5,
        //     order_by:'',
        //   }
        // }
        feedbackList(data).then(res=>{
          console.log(res)
          if(res.code==200){
            this.total = res.data.total
            this.list = res.data.data
          }
        })
      },
      //搜索数据
      searchData(){
        this.selectDatas.search_info = this.search
        this.getList(this.selectDatas)
      },
      clearData(){
        this.search = ''
        this.selectDatas.search_info = this.search
        this.getList(this.selectDatas)
      },
      //创建问题
      createProblem(){
        this.isTextArea = true
      },
      //取消创建
      consoleProblem(){
        this.isTextArea = false
      },
      submitProblem(){
        if(this.question==''){
          this.$message.error('请输入问题')
        }else{
          let data={
            question:this.question
          }
          createFeedback(data).then(res=>{
            console.log(res.data)
            if(res.code==200){
              this.$message.success('创建成功')
              this.isTextArea = false
              this.getList(this.selectDatas)
            }
          })
        }
      },
      //更新问题
      updateProblem(ID,index){
        let data={
          ID:ID,
          question:this.list[index].input,
        }
        updateFeedback(data).then(res=>{
          if(res.code==200){
            this.$message.success('更改成功')
            this.getList()
          }
        })
      },
      //监听条数变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        Object.assign(this.selectDatas.pager, {size:val})
        this.getList(this.selectDatas)
      },
      //监听页码变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        Object.assign(this.selectDatas.pager, {number:val})
        this.getList(this.selectDatas)
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/help/feedback.scss";
</style>
